<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link type="text/css" rel="stylesheet" href="../../c-asserts/mui/css/mui.min.css"/>
    <link type="text/css" rel="stylesheet" href="../../c-asserts/sui/sui1.0.1.css"/>
    <link type="text/css" rel="stylesheet" href="../../c-asserts/swiper/css/swiper.min.css"/>
    <link type="text/css" rel="stylesheet" href="../../c-asserts/swiper/swipierlis.css"/>
    <style type="text/css">
        .content-item{
            background-color:#ffffff;
        }
        .content-title{
            font-size:16px;
            font-weight:400;
        }
        .padding10px{
            padding:10px;
        }
        .borderbuttom1pxgray{
             border-bottom:1px solid #f4f4f4;
        }
        .content-box{
            border-bottom:1px solid #f4f4f4;
        }
        .content-star-box{
            width:100px;
            background-color:#c4c2c2;
        }
        .content-redtoole{
            width:0px;
            height:21px;
            background-color:#ff7720;
        }
        .content-star{
            width:100px;
            background-image:url(../../image/star.png);
            background-size:100% 100%;
            background-position:center center;
            background-repeat:no-repeat;
            height:21px;
        }
        .content-count{
            color:#ff7720;
            width:50px;
            text-align:center;
            height:21px;
            line-height:23px;
        }
        .content-weizhi{
            text-align:right;
            color:#8f8f94;
            font-size:14px;
        }
        .doorimg{
            width:100px;
            height:70px;
        }
        .doorimg img{
            width:90px;
            height:70px;
        }
        .door-name{
            font-size:14px;
        }
        .content-type{
            color:#8f8f94;
            font-size:14px;
        }
        .content-money{
            color:#ff7720;
            font-size:14px;
        }
        .content-out{
            text-align:right;
            font-size:14px;
            color:#8f8f94;
        }
        .margintop12{
            margin-top:12px;
        }
        .footer{
            text-align:center;
            padding-top:40px;
            display:none;
        }
        .phone{
            position: absolute;
            right:0;
            padding-left:10px;
            border-left:1px solid #efeff4;
        }
        .phone span{
            display:block;
            font-size:25px;
            line-height:30px;
            color:#FFFFFF;
            background-color:#4cd964;
            padding:0 4px;
            border-radius:5px;
        }
    </style>
</head>
<body>
    <div class="lisContent">
    </div>
    <div class="footer"><p>暂无数据</p></div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../script/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="../../script/public.js"></script>
<script type="text/javascript" src="../../script/template.js"></script>
<script type="text/javascript" src="../../assets/swiper/js/swiper.min.js"></script>
<script type="text/template" id="temp">
    {{each list as val i}}
        <div class="content-item">
            {{if i == 0 || list[i].shopid != list[i-1].shopid }}
               <div class="padding10px borderbuttom1pxgray margintop12">
                    <div class="sui-flex-row">
                        <div class="content-title ">{{val.shopname}}</div>
                        <div class="sui-flex1 content-weizhi phone" onclick="phoneCall('{{val.phone}}')"><span class="mui-icon  mui-icon-phone"></span></div>
                    </div>
                    <div></div>
                </div>
            {{/if}}
            <div class="content-box padding10px" data-frameId="{{val.shopid}}" onclick="toOptioninfo(this)">
                <div class="door-item sui-flex-row">
                    <div class="doorimg"><img class="lazyload" src="../../image/loading.gif" data-original="{{val.cover}}"></div>
                    <div class="sui-flex1 sui-flex-col">
                        <div class="door-name"></div>
                        <div class="sui-flex1"></div>
                        <div class="sui-flex-row">
                            <div class="sui-flex1 content-type"></div>
                            <div class="content-money">{{val.area}} {{val.street}}</div>
                        </div>
                        <div class="sui-flex1"></div>
                        <div class="sui-flex-row">
                            <div class="content-star-box">
                                <div class="content-redtoole" data-width="{{val.evalstar}}"><div class="content-star"></div></div>
                            </div>
                             <div class="sui-flex1 content-out"></div>                         
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{/each}}
</script>
<script type="text/javascript">

    var pageindex;  //当前页

    var paramdata = {};

    $(document).ready(function(){
       getDatalis(paramdata);  //默认请求

        //下拉刷新
        api.setRefreshHeaderInfo({
            visible: true,
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function( ret, err ){
            //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
            getDatalis(paramdata);
        });

        api.addEventListener({
            name: 'mainlis'
        }, function(ret, err){
            var param = ret.value;
            getDatalis(param);
        });
    };
    //post.  请求后台数据
    function getDatalis(param){
        paramdata = param;
        pageindex = 1;
        param.page = pageindex;
        param.pagesize = pagesize;
        api.showProgress();
        myPostAjax('shop/getShop.json',{code:getUserCode()}, function (ret, err) {
            api.hideProgress();
            api.refreshHeaderLoadDone();
            if (ret && ret.length > 0) {
                ret = reviewdata(ret);
                $('.lisContent').html(listoString(ret, $('#temp').html()));
                showfooter();
                if(ret.length == pagesize ) scrolltobottom(param);
            }else  hidenfooter();
        })
    }
    //加载更多
    function scrolltobottom(param){
        api.addEventListener({
            name:'scrolltobottom',
            extra:{threshold:0}
        },function(ret,err){
            pageindex++;
            param.page = pageindex;
            myPostAjax('shop/getShop.json',{code:getUserCode()}, function (ret, err) {
                if(ret && ret.length > 0){
                    ret = reviewdata(ret);
                    $('.lisContent').append(listoString(ret, $('#temp').html()));
                    showfooter();
                }
            });
        });
         
    }
        function phoneCall(number){
           api.call({number:number});
        }
    //对数据的一些简单处理
    function reviewdata(data){
        for (var i = 0; i < data.length; i++) {
            for (var l = 0; l < icontent.length; l++) {
                if (data[i].content == icontent[l].id)
                    data[i].content_ = icontent[l].name + '，';
            }
            for (var j = 0; j < icategory.length; j++) {
                if (data[i].category == icategory[j].id)
                    data[i].content_ += icategory[j].name;
            }
        }
        return data;
    }
    //对footer显示的一些处理  show
    function showfooter(){
        $('.footer').css('display','none');
        $('.content-redtoole').each(function(index,ele){$(ele).css('width',$(ele).attr('data-width')*20 +'px');});
        $(".lazyload").lazyload();
    }

    //对footer隐藏的一些处理   hide
    function hidenfooter(){
        $('.lisContent').html('');
        $('.footer').css('display','block');
        api.removeEventListener({name:'scrolltobottom'});
    }

    //打开店铺详细
    function toOptioninfo(obj){
        var shopid = $(obj).attr('data-frameId');
         //   pageParam:{shopid:shopid}
           location.href="../main/shop.html";
    }

</script>
</html>